<template>
  <Row type="flex" justify="space-between">
    <Col flex="48%" v-for="item in ArticleList" v-if="ArticleList.length">
      <div :class="`newItem nowrap ${color}`">
        <router-link target="_blank" :to="`/articleDetail/${item.article_id}`"> {{ item.article_title }} </router-link>
<!--        <router-link target="_blank" :to="`/themeService/article/${bannerId}?id=${item.article_id}`"> {{ item.article_title }}</router-link>-->
      </div>
    </Col>
    <Col flex="100%" v-if="ArticleList.length && showPagination" class="pt15">
      <Pagination :hideOnSinglePage="true" :current="page.current" :total="page.total" :page-size="page.pageSize" @change="onChange" />
    </Col>

    <Col flex="100%" v-if="ArticleList.length===0">
      <Empty description="暂无数据"></Empty>
    </Col>

  </Row>
</template>

<script lang="ts" >
import {defineComponent, onMounted, PropType, ref, reactive,toRefs} from "vue";
import { Row, Col , Empty , Pagination } from "ant-design-vue";
import { parseTime } from '/@/utils';
import {getArticleListApi , articleModel } from "/@/api/theme";



export default defineComponent({
  name: "newList",
  components: { Row, Col , Empty , Pagination},
  props: {
    links: {
      type: Array as PropType<articleModel[]>,
      default: []
    },
    color:{
      type: String as PropType<string>,
      default:'DarkBlue'
    },
    itemId:{
      type: String as PropType<string>,
      default:''
    },
    bannerId:{
      type: String as PropType<string>,
      default:''
    },
    showPagination:{
      type: Boolean as PropType<boolean>,
      default:false
    }
  },
  setup(props) {
    const { links , color , itemId , bannerId} = toRefs(props);
    const ArticleList = ref([]);
    const page = reactive({
      current:1,
      total:0,
      pageSize:12
    })

    const getItemList = x => {
      const Param = {
        current: page.current,
        size: page.pageSize,
        itemId: x
      }
      getArticleListApi(Param).then(({success, data}) => {
        if (success) {
          let {total, records , current } = data;
          if (total) {
            page.total = total;
            page.current = current;
            ArticleList.value = records
          }else {
            ArticleList.value = []
          }
        }
      });
    }
    const onChange = (data) => {
      page.current = data
      getItemList(itemId.value);
    }


    const init = () => {
      if(itemId){
        getItemList(itemId.value)
      }else {
        console.log('itemId为空');
      }
    }

    onMounted(init)

    return {
      links ,color , parseTime , ArticleList,bannerId ,page,onChange
    };
  }
});
</script>

<style lang="less" scoped>

.newItem{
  position: relative;
  padding: 15px 0 15px 20px;
  //border-bottom: 1px dashed #D8D8D8;

  &::before{
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    background: #07F;
    content: '';
  }

  &.DarkRed::before{
    background: #f00;
  }
}

</style>
